<template>
  <div id="app">




  <template>
    <el-select v-model="status" placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
  </template>


    <el-table
        :data="goodsData"
        style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.type }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.describes }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          label="商品 ID"
          width="180px"
          prop="id">
      </el-table-column>
      <el-table-column
          label="商品名称"
          width="350px"
          prop="name">
      </el-table-column>
      <el-table-column
          width="150px"
          label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="onRevampGoods(scope.$index)" circle></el-button>
<!--          <template>-->
<!--            <el-popconfirm-->
<!--                title="这是一段内容确定删除吗？"-->
<!--            >-->
<!--              <el-button slot="reference">删除</el-button>-->
<!--            </el-popconfirm>-->
<!--          </template>-->

          <el-button type="danger" icon="el-icon-delete" @click="open(scope.$index)" circle></el-button>

        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>




<!--修改按钮弹窗  --  参考商品添加-->
    <el-dialog
        title="修改商品"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">

      <form action="" method="get">
        <div class="input_control">
          <input type="text" class="form_input" placeholder="商品名称" v-model="foodForm.name"></input>
        </div>
        <div class="input_control">
          选择商品类型 ：
          <el-select v-model="foodForm.types" placeholder="请选择">
            <el-option
                v-for="item in types"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="input_control">
          <input type="number" name="number" class="form_input" placeholder="原价" v-model="foodForm.price"/>
        </div>
        <div class="input_control">
          <el-input
            type="textarea"
            autosize
            placeholder="商品描述"
            v-model="foodForm.describes">
        </el-input>
        </div>

        <div class="input_control">
          商品封面图：
          <el-upload
              class="upload-demo"
              action="http://192.168.110.110:80/api/plug/uploadImages"
              :on-change="uphandleChange"
              :on-success="upProductCover"
              :file-list="foodForm.img">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
        <div class="input_control">
          商品列表图：
          <el-upload
              class="upload-demo"
              action="http://192.168.110.110:80/api/plug/uploadImages"
              :on-change="handleChange"
              :on-success="imglist"
              :file-list="foodForm.imglist">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
        <!--      ---------------规格----------------     -->
        <el-row style="overflow: auto; text-align: center;">
          <el-button type="primary" @click="dialogFormVisible = true" style="margin-bottom: 10px;">添加规格</el-button>
          <el-table
              :data="foodForm.spec"
              style="margin-bottom: 20px;"
              :row-class-name="tableRowClassName">
            <el-table-column
                prop="name"
                label="规格">
            </el-table-column>
            <el-table-column
                prop="stock"
                label="数量">
            </el-table-column>
            <el-table-column
                prop="fee"
                label="价格">
            </el-table-column>
            <el-table-column label="操作" >
              <template slot-scope="scope">
                <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>


        <div class="input_control">
          <form method="get">
            是否上架：<input type="radio" name="status" value="1" v-model="foodForm.status" checked>上架
            <input type="radio" name="status" value="0" v-model="foodForm.status" checked>下架
          </form>
        </div>
      </form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="revampGoods">确 定</el-button>
  </span>
    </el-dialog>




<!--    添加规格-->
    <el-dialog title="添加规格" :visible.sync="dialogFormVisible">
      <el-form :rules="specFormrules" :model="specForm">
        <el-form-item label="名称" label-width="100px" prop="name">
          <el-input v-model="specForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" label-width="100px">
          <el-input-number v-model="specForm.stock" :min="0" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="价格" label-width="100px">
          <el-input-number v-model="specForm.fee" :min="0" :max="10000"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addspecs">确 定</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogFormVisible: false,
      options: [{
        value: 0,
        label: '已下架'
      }, {
        value: 1,
        label: '正在销售'
      }],
      page: 1,
      status: 1,
      value: '',
      types: [],
      ids: [],
      foodForm: {
        name: '',
        types: '',
        price: '',
        describes: '',
        img: '',
        imglist: [],
        spec: [],
        status: '',
      },
      specForm: {
        name: '',
        stock: 20,
        fee: 0,
      },
      specFormrules: {
        spec: [
          { required: true, message: '请输入规格', trigger: 'blur' },
        ],
      },
      goodsData: [],
    }
  },
  created() {
    this.getgoods();
    this.getTypes()
  },
  methods: {
    // 分类请求--与son1重复
    async getTypes() {
      await this.$http.post("/admin/typeList").then(res => {
        console.log(res);
        this.types = res.data.data;
      }).catch(err => {
        console.log("son1 getTypes err => ", err);
      })
    },




    // 获取商品列表
    async getgoods(){
      await this.$http.post("/Admin/productList",{
        page: this.page,
        limit: 10,
        status: this.status,
      }).then(res =>{
        this.goodsData = res.data.data;
        console.log(this.goodsData);
      }).catch(err =>{
        console.log(err);
      })
    },

    // 修改商品--未完成
    async revampGoods() {
      // let img =  JSON.stringify(this.foodForm.img)
      console.log(this.foodForm.img);
      console.log(this.foodForm.imglist);
      await this.$http.post("/admin/editProduct",{
        name: this.foodForm.name,
        types: this.foodForm.types,
        price: this.foodForm.price,
        describes: this.foodForm.describes,
        img: JSON.stringify(this.foodForm.img),
        imglist: JSON.stringify(this.foodForm.imglist),
        spec: this.foodForm.spec,
        status: this.foodForm.status,
        id: this.foodForm.id,
      }).then(res =>{
        console.log(res)
      }).catch(err => {
        console.log("addgoods err => ",err)
      })

    },

    //删除商品
    open(index) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.offShelf(index)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },

    // 删除商品
    async offShelf(index) {
      console.log(this.goodsData[index].id);
      this.ids[0] = this.goodsData[index].id;
      console.log(this.ids);

      await this.$http.post("/admin/deleteProduct",{
        "ids": this.goodsData[index].id,
      }).then(res =>{
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getgoods()
        console.log(res)
      }).catch(err => {
        console.log("offShelf err => ",err)
      })
    },




    //自定义列模板
    tableRowClassName(row, index) {
      if (index === 1) {
        return 'info-row';
      } else if (index === 3) {
        return 'positive-row';
      }
      return '';
    },
    handleDelete(index){
      // console.log(index)
      this.foodForm.spec.splice(index, 1);
    },
    // 操作当前页面
    handleCurrentChange(val) {
      console.log(val)
      this.page = val;
    },
    // 对话框
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    // 打开修改窗口
    onRevampGoods(index) {
      this.foodForm = this.goodsData[index];
      this.foodForm.img = '';
      this.foodForm.imglist = '';
      this.dialogVisible = true;
    },


    // 添加规格
    addspecs(){
      this.foodForm.spec.push({...this.specForm});
      this.specForm.specs = '名称';
      this.specForm.stock = 20;
      this.specForm.fee = 0;
      this.dialogFormVisible = false;
    },

    // 图片上传
    uphandleChange(file, fileList) {
      this.fileimgList = fileList.slice(-3);
    },
    handleChange(file, fileList) {
      this.fileimglistList = fileList.slice(-3);
    },
    // 放入foodForm
    upProductCover(response, file, fileList) {
      this.foodForm.img = response.data.url;
      console.log(response.data.url);
    },
    imglist(response, file, fileList) {
      this.foodForm.imglist.push(response.data.url);
      console.log(response.data);
    },

  },
  watch: {
    status: function() {
      this.getgoods();
    },
    page: function() {
      this.getgoods();
    },
  }
}
</script>

<style lang="less" scoped>
  .text{
    color: black

  }

  .input_control{
    width:360px;
    margin:20px auto;
  }
  input[type="text"],input[type="number"],#btn1,#btn2{
    box-sizing: border-box;
    text-align:center;
    font-size:1em;
    height:2.7em;
    border-radius:4px;
    border:1px solid #c8cccf;
    color:#6a6f77;
    -web-kit-appearance:none;
    -moz-appearance: none;
    display:block;
    outline:0;
    padding:0 1em;
    text-decoration:none;
    width:100%;
  }
  input[type="text"]:focus{
    border:1px solid #ff7496;
  }


  .button {
    background-color: #ca8fff; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
  }

  .button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }

  .button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  }



</style>
